<template>
  <div id="app">
    <input type="button" value="打印vuex仓库对象" @click="printStore()" />
    <hr />
    <p>vuex中记录的 msg 数据：{{ $store.state.msg }}</p>
    <p>vuex中记录的 msg 数据：{{ msg }}</p>
    <input type="text" v-model="msg" />
    <p>vuex中记录的 percentage 数据： {{ percentage }}</p>
    <p>vuex中记录的 percentage 数据： {{ percentage * 100 + "%" }}</p>
    <p>vuex中记录的 perc 数据： {{ perc }}</p>
    <p>vuex中记录的 num 数据： {{ num }}</p>
    <p>vuex中记录的 product.num 数据： {{ productNum }}</p>
    <input type="text" v-model="productNum" />

    <hr />
    <input type="button" value="childOne" @click="child = 'ChildOne'" />
    <input type="button" value="childTwo" @click="child = 'ChildTwo'" />

    <!-- <ChildOne></ChildOne> -->
    <component :is="child"></component>
  </div>
</template>

<script>
import ChildOne from "./components/ChildOne";
import ChildTwo from "./components/ChildTwo";

export default {
  name: "App",
  components: {
    ChildOne,
    ChildTwo,
  },
  data() {
    return {
      child: "",
    };
  },
  computed: {
    // msg() {
    //   return this.$store.state.msg;
    // },
    msg: {
      get() {
        return this.$store.state.msg;
      },
      set(nv) {
        // 官方不建议使用的
        // this.$store.state.msg = nv;
        // 官方建议通过事件触发的方式完成 mutations 中事件的调用，进行变量的修改
        this.$store.commit("setMsg", nv);
      },
    },
    percentage() {
      return this.$store.state.percentage;
    },
    perc() {
      return this.$store.getters.perc;
    },
    num() {
      return this.$store.state.num;
    },
    // productNum() {
    //   return this.$store.state.product.num;
    // },
    productNum: {
      get() {
        return this.$store.state.product.num;
      },
      set(nv) {
        this.$store.commit("setProductNum", nv);
      },
    },
  },
  methods: {
    printStore() {
      console.log(this.$store);
      console.log(this.$store.state);
      console.log(this.$store.state.msg);
      console.log(this.$store.state.arr);
    },
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
